<template>
	<view class="page">
		<!-- tab导航栏开始 -->
		<view class="tab-box">
			<view class="tab-item" :class="{'selected': item.id ==tabselected}" v-for="(item,index) in tabList" :key="item.id" @click="tabSelectedChange(item.id)">
				{{item.name}}
			</view>
		</view>
		<!-- tab导航栏结束 -->
		<view class="search-box">
			<icon class="search-icon" type="search" size="22"/>
			<input @blur="inputChange" confirm-type="搜索" @confirm="inputChange" placeholder="采购单号/标题/供应商/申请人/项目名称" class="input" type="text" value="" />
		</view>
		<scroll-view class="scroll-box" scroll-y @scrolltolower="scrollpage">
			<card @tapClick="cardTap" :info="item" v-for="(item,index) in list" :key="index"></card>
			<view class="clearbottom">
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import card from '@/subcontractList/order/purchase/component/card/card';
	export default {
		components:{
			card
		},
		data() {
			return {
				apiinfo:{ // 接口传参信息
					"search":"",
					"status":"",
					"currentPage":1,
					"pageSize":"15",
				},
				isscrollpage:true, // 是否允许翻页
				list:[], // 审批列表
				tabselected:'',
				colorList:[ // 状态颜色列表
					{
						id:1,
						name:'已审批',
						color:'#64c05b'
					},
					{
						id:2,
						name:'待审批',
						color:"#fb3835"
					},
					{
						id:3,
						name:'已退回',
						color:'#fb8929'
					},
				],
				
				tabList:[ // tab导航栏列表0待审核,1已通过,2被退回,3已关闭
					{
						id:'',
						name:'全部'
					},
					{
						id:'0',
						name:'待审批'
					},
					{
						id:'1',
						name:'已审批'
					},
					{
						id:'2',
						name:'已退回'
					},
				]
			}
		},
		onLoad() {
			this.purchaseapprovals();
		},
		onShow() {
			let refreshPage = getApp().globalData.refreshPage;
			if(refreshPage == 'pendingapproval'){
				this.apiinfo.currentPage = 1;
				this.isscrollpage = true;
				this.list = [];
				getApp().globalData.refreshPage = null;
				this.purchaseapprovals();
			}
		},
		methods: {
			/**
			 * 滚动翻页触发事件
			 */
			scrollpage:function(){
				let isscrollpage = this.isscrollpage;
				if(isscrollpage){
					this.apiinfo.currentPage += 1;
					this.purchaseapprovals();
				}
			},
			/**
			 * 采购订单审批列表
			 */
			purchaseapprovals:function(){
				let list =this.list;
				api.purchaseapprovals(this.apiinfo).then(res=>{
					if(res.data.result.length > 0){
						list.push.apply(list,res.data.result);
						this.list = list;
					}else{
						this.isscrollpage = false;
						uni.showToast({
							title: '没有更多',
							duration: 2000
						});
					}
				})
			},
			/**
			 * 导航栏点击触发事件
			 */
			tabSelectedChange:function(id){
				let apiinfo = this.apiinfo;
				apiinfo.currentPage = 1;
				apiinfo.status = id;
				this.apiinfo = apiinfo;
				this.isscrollpage = true;
				this.list = [];
				this.tabselected = id;
				this.purchaseapprovals();
			},
			/**
			 * 搜索框输入触发事件
			 */
			inputChange:function(e){
				let apiinfo = this.apiinfo;
				this.isscrollpage = true;
				this.list = [];
				apiinfo.currentPage = 1;
				apiinfo.search = e.detail.value;
				this.apiinfo = apiinfo;
				this.purchaseapprovals();
			},
			/**
			 * 采购订单卡片点击触发事件
			 */
			cardTap:function(data){
				console.log(data);
					uni.navigateTo({
						url: '/subcontractList/order/purchase/pendingapproval/detail/detail?id=' + data.id
					});
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color:#eaeaea;
		min-height: 100vh;
	}
	.tab-box{
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		.tab-item{
			width: 25%;
			text-align: center;
			color:#929292;
		}
		.selected{
			color: black;
			border-bottom:3px solid black;
		}
	}
	.search-box{
		display: flex;
		width: calc(100% - 40rpx);
		margin:20rpx;
		background-color: white;
		height: 80rpx;
		border-radius: 10rpx;
		box-shadow:0px 0px 10px #8A8A8A;
		.search-icon{
			margin:20rpx;
		}
		.input{
			flex:1;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24rpx;
		}
	}
	.scroll-box{
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
		height:calc(100vh - 200rpx);
	}
	.clearbottom{
		width: 100%;
		height: calc(constant(safe-area-inset-bottom) + 20rpx);
		height: calc(env(safe-area-inset-bottom) + 20rpx);
	}
</style>
